<template>
    <div class="setting-main">
        <div class="section-title">{{ $t("m.Avatar_Setting") }}</div>
        <template v-if="!avatarOption.imgSrc">
            <Upload
                type="drag"
                class="mini-container"
                accept=".jpg,.jpeg,.png,.bmp,.gif"
                action=""
                :before-upload="handleSelectFile"
            >
                <div style="padding: 30px 0">
                    <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                    <p>Drop here, or click to select manually</p>
                </div>
            </Upload>
        </template>

        <template v-else>
            <div class="flex-container">
                <div class="cropper-main inline">
                    <vueCropper
                        ref="cropper"
                        autoCrop
                        fixed
                        :autoCropWidth="200"
                        :autoCropHeight="200"
                        :img="avatarOption.imgSrc"
                        :outputSize="avatarOption.size"
                        :outputType="avatarOption.outputType"
                        :info="true"
                        @realTime="realTime"
                    >
                    </vueCropper>
                </div>
                <ButtonGroup vertical class="cropper-btn">
                    <Button @click="rotate('left')">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </Button>
                    <Button @click="rotate('right')">
                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    </Button>
                    <Button @click="reselect">
                        <i class="fa fa-refresh" aria-hidden="true"></i>
                    </Button>
                    <Button @click="finishCrop">
                        <i class="fa fa-bookmark" aria-hidden="true"></i>
                    </Button>
                </ButtonGroup>
                <div class="cropper-preview" :style="previewStyle">
                    <div :style="preview.div">
                        <img :src="avatarOption.imgSrc" :style="preview.img" />
                    </div>
                </div>
            </div>
        </template>
        <Modal v-model="uploadModalVisible" title="Upload the avatar">
            <div class="upload-modal">
                <p class="notice">Your avatar will be set to:</p>
                <img :src="uploadImgSrc" />
            </div>
            <div slot="footer">
                <Button @click="uploadAvatar" :loading="loadingUploadBtn"
                    >upload</Button
                >
            </div>
        </Modal>

        <div class="section-title">{{ $t("m.Profile_Setting") }}</div>
        <Form ref="formProfile" :model="formProfile">
            <Row type="flex" :gutter="30" justify="space-around">
                <Col :span="11">
                    <FormItem label="Real Name">
                        <Input v-model="formProfile.real_name" />
                    </FormItem>
                    <Form-item label="School">
                        <Input v-model="formProfile.school" />
                    </Form-item>
                    <Form-item label="Major">
                        <Input v-model="formProfile.major" />
                    </Form-item>
                    <FormItem label="Language">
                        <Select v-model="formProfile.language">
                            <Option
                                v-for="lang in languages"
                                :key="lang.value"
                                :value="lang.value"
                                >{{ lang.label }}</Option
                            >
                        </Select>
                    </FormItem>
                    <Form-item>
                        <Button
                            type="primary"
                            @click="updateProfile"
                            :loading="loadingSaveBtn"
                            >Save All</Button
                        >
                    </Form-item>
                </Col>

                <Col :span="11">
                    <Form-item label="Mood">
                        <Input v-model="formProfile.mood" />
                    </Form-item>
                    <Form-item label="Blog">
                        <Input v-model="formProfile.blog" />
                    </Form-item>
                    <Form-item label="Github">
                        <Input v-model="formProfile.github" />
                    </Form-item>
                </Col>
            </Row>
        </Form>
    </div>
</template>

<script>
import api from "@oj/api"
import utils from "@/utils/utils"
import { VueCropper } from "vue-cropper"
import { types } from "@/store"
import { languages } from "@/i18n"

export default {
    components: {
        VueCropper
    },
    data() {
        return {
            loadingSaveBtn: false,
            loadingUploadBtn: false,
            uploadModalVisible: false,
            preview: {},
            uploadImgSrc: "",
            avatarOption: {
                imgSrc: "",
                size: 0.8,
                outputType: "png"
            },
            languages: languages,
            formProfile: {
                real_name: "",
                mood: "",
                major: "",
                blog: "",
                school: "",
                github: "",
                language: ""
            }
        }
    },
    mounted() {
        let profile = this.$store.state.user.profile
        Object.keys(this.formProfile).forEach(element => {
            if (profile[element] !== undefined) {
                this.formProfile[element] = profile[element]
            }
        })
    },
    methods: {
        checkFileType(file) {
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(file.name)) {
                this.$Notice.warning({
                    title: "File type not support",
                    desc:
                        "The format of " +
                        file.name +
                        " is incorrect ，please choose image only."
                })
                return false
            }
            return true
        },
        checkFileSize(file) {
            // max size is 2MB
            if (file.size > 2 * 1024 * 1024) {
                this.$Notice.warning({
                    title: "Exceed max size limit",
                    desc:
                        "File " +
                        file.name +
                        " is too big, you can upload a image up to 2MB in size"
                })
                return false
            }
            return true
        },
        handleSelectFile(file) {
            let isOk = this.checkFileType(file) && this.checkFileSize(file)
            if (!isOk) {
                return false
            }
            let reader = new window.FileReader()
            reader.onload = e => {
                this.avatarOption.imgSrc = e.target.result
            }
            reader.readAsDataURL(file)
            return false
        },
        realTime(data) {
            this.preview = data
        },
        rotate(direction) {
            if (direction === "left") {
                this.$refs.cropper.rotateLeft()
            } else {
                this.$refs.cropper.rotateRight()
            }
        },
        reselect() {
            this.$Modal.confirm({
                content: "Are you sure to disgard the changes?",
                onOk: () => {
                    this.avatarOption.imgSrc = ""
                }
            })
        },
        finishCrop() {
            this.$refs.cropper.getCropData(data => {
                this.uploadImgSrc = data
                this.uploadModalVisible = true
            })
        },
        uploadAvatar() {
            this.$refs.cropper.getCropBlob(blob => {
                let form = new window.FormData()
                let file = new window.File(
                    [blob],
                    "avatar." + this.avatarOption.outputType
                )
                form.append("image", file)
                this.loadingUploadBtn = true
                this.$http({
                    method: "post",
                    url: "upload_avatar",
                    data: form,
                    headers: { "content-type": "multipart/form-data" }
                }).then(
                    res => {
                        this.loadingUploadBtn = false
                        this.$success("Successfully set new avatar")
                        this.uploadModalVisible = false
                        this.avatarOption.imgSrc = ""
                        this.$store.dispatch("getProfile")
                    },
                    () => {
                        this.loadingUploadBtn = false
                    }
                )
            })
        },
        updateProfile() {
            this.loadingSaveBtn = true
            let updateData = utils.filterEmptyValue(
                Object.assign({}, this.formProfile)
            )
            api.updateProfile(updateData).then(
                res => {
                    this.$success("Success")
                    this.$store.commit(types.CHANGE_PROFILE, {
                        profile: res.data.data
                    })
                    this.loadingSaveBtn = false
                },
                _ => {
                    this.loadingSaveBtn = false
                }
            )
        }
    },
    computed: {
        previewStyle() {
            return {
                width: this.preview.w + "px",
                height: this.preview.h + "px",
                overflow: "hidden"
            }
        }
    }
}
</script>

<style lang="less" scoped>
.inline {
    display: inline-block;
}

.copper-img {
    width: 400px;
    height: 300px;
}

.flex-container {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 10px;
    .cropper-main {
        flex: none;
        .copper-img;
    }
    .cropper-btn {
        flex: none;
        vertical-align: top;
    }
    .cropper-preview {
        flex: none;
        /*margin: 10px;*/
        margin-left: 20px;
        box-shadow: 0 0 1px 0;
        .copper-img;
    }
}

.upload-modal {
    .notice {
        font-size: 16px;
        display: inline-block;
        vertical-align: top;
        padding: 10px;
        padding-right: 15px;
    }
    img {
        box-shadow: 0 0 1px 0;
        border-radius: 50%;
    }
}
</style>
